import * as echarts from 'echarts/lib/echarts';
import { TRMessage } from '#/components';

//Echart 拖拽一根线
/* myChart Echart图挂载的元素
   id: 可拖拽的那跟线的id
   yAxisData   可拖拽的那跟线的数据  数组
   updatePosition
   renovate
   dragChangeList  //交易-需求预测调整
*/
export const DragLine = (
  myChart,
  id,
  yAxisData,
  updatePosition,
  renovate,
  dragChangeList,
  maxCapacity,
  xAxisData,
  powerAndelectricId,
) => {
  // 拖拽

  setTimeout(function () {
    myChart.setOption({
      graphic: echarts.util.map(yAxisData, function (item, dataIndex) {
        let position = myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item]);
        return {
          id: dataIndex,
          type: 'circle',
          position: position,
          shape: {
            r: 5,
          },
          invisible: true,
          draggable: true,
          ondrag: echarts.util.curry(onPointDragging, dataIndex),
          onmousemove: echarts.util.curry(showTooltip, dataIndex),
          onmouseout: echarts.util.curry(hideTooltip, dataIndex),
          ondragend: echarts.util.curry(onPointDragEnd, dataIndex),
          z: 100,
        };
      }),
    });
  }, 0);

  myChart.on('dataZoom', updatePosition);

  function showTooltip(dataIndex) {
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: dataIndex,
    });
  }

  function hideTooltip() {
    myChart.dispatchAction({
      type: 'hideTip',
    });
  }

  function onPointDragging(dataIndex) {
    let nextNumber = Math.max(0, myChart.convertFromPixel({ seriesIndex: 0 }, this.position)[1]);
    if (maxCapacity) {
      nextNumber = Math.min(maxCapacity, nextNumber);
    }
    yAxisData[dataIndex] = nextNumber;
    myChart.setOption({
      series: [
        {
          id: id,
          data: yAxisData,
        },
      ],
    });
  }
  function onPointDragEnd(dataIndex) {
    if (dragChangeList) {
      dragChangeList();
    }
    renovate.isRenovate = true;
    if (maxCapacity) {
      if (yAxisData[dataIndex] === maxCapacity) {
        if (powerAndelectricId === 1) {
          TRMessage.error(
            `您调整的${xAxisData[dataIndex]} 时间点的值大于最大上网电量${maxCapacity}，已重置为最大上网电量`,
          );
        } else {
          TRMessage.error(
            `您调整的${xAxisData[dataIndex]} 时间点的值大于装机容量${maxCapacity}，已重置为装机容量`,
          );
        }
      }
    }
    myChart.setOption({
      graphic: echarts.util.map(yAxisData, function (item, dataIndex) {
        return {
          id: dataIndex,
          position: myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item]),
        };
      }),
    });
  }
};

export const getPageQuery = () => {
  let url = window.location.href;
  let params = {};
  if (url.indexOf('?') > 0) {
    let baseUrl = url.substring(url.indexOf('?') + 1);
    baseUrl.split('&').map((x) => {
      let [k, v] = x.split('=');
      params[k] = decodeURIComponent(v);
    });
  }
  return params;
};

/**
 * 基于DragLine方法重新封装，主要修改点如下：
 * 1.入参方式修改为对象
 * 2.增加最大最小值配置
 * 3.移除针对性的业务逻辑
 *
 * 参数说明：
 * myChart echart实例
 * id series id
 * yAxisData
 * limitData
 * updatePosition 更新graphic定位回调函数
 * dragChangeList 告知父组件修改后的数据
 */
export const DragLineFunc = ({
  myChart,
  id,
  yAxisData,
  limitData,
  updatePosition,
  dragChangeList,
}) => {
  // 拖拽

  let localYAxisData = JSON.parse(JSON.stringify(yAxisData));

  setTimeout(function () {
    myChart.setOption({
      graphic: echarts.util.map(localYAxisData, function (item, dataIndex) {
        let position = myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item]);
        return {
          id: dataIndex,
          type: 'circle',
          position: position,
          shape: {
            r: 5,
          },
          invisible: true,
          draggable: true,
          ondragstart: echarts.util.curry(onPointDragStart, dataIndex),
          ondrag: echarts.util.curry(onPointDragging, dataIndex),
          onmousemove: echarts.util.curry(showTooltip, dataIndex),
          onmouseout: echarts.util.curry(hideTooltip, dataIndex),
          ondragend: echarts.util.curry(onPointDragEnd, dataIndex),
          z: 100,
        };
      }),
    });
  }, 0);

  myChart.on('dataZoom', updatePosition);

  function showTooltip(dataIndex) {
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: dataIndex,
    });
  }

  function hideTooltip() {
    myChart.dispatchAction({
      type: 'hideTip',
    });
  }

  function onPointDragStart(dataIndex) {
    localYAxisData = myChart.getOption().series[0].data;
  }
  function onPointDragging(dataIndex) {
    let nextNumber = myChart.convertFromPixel({ seriesIndex: 0 }, this.position)[1];
    if (nextNumber < limitData[dataIndex].min) {
      nextNumber = limitData[dataIndex].min;
    } else if (nextNumber > limitData[dataIndex].max) {
      nextNumber = limitData[dataIndex].max;
    }
    localYAxisData[dataIndex] = nextNumber;
    myChart.setOption({
      series: [
        {
          id: id,
          data: localYAxisData,
        },
      ],
    });
  }
  function onPointDragEnd() {
    if (dragChangeList) {
      dragChangeList(localYAxisData);
    }
    myChart.setOption({
      graphic: echarts.util.map(localYAxisData, function (item, dataIndex) {
        return {
          id: dataIndex,
          position: myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item]),
        };
      }),
    });
  }
};

/**
 * Echart 获取css变量 用于主题切换
 */
export const getCssVariableValue = (variableName) => {
  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
};
